<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}XbyJob 定时任务调度系统{% endblock %}</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    {% block extra_css %}{% endblock %}
    
    <style>
        .sidebar {
            min-height: calc(100vh - 56px);
            background-color: #f8f9fa;
            transition: all 0.3s ease;
            position: fixed;
            top: 56px; /* 固定导航栏下方 */
            left: 0;
            z-index: 1000;
            padding: 8px;
        }
        .sidebar.collapsed {
            width: 60px !important;
            padding: 8px 4px;
        }
        .sidebar.expanded {
            width: 200px !important;
            padding: 8px 12px;
        }
        .main-content {
            min-height: calc(100vh - 56px);
            transition: all 0.3s ease;
            padding-left: 16px;
            padding-right: 16px;
        }
        .main-content.collapsed {
            margin-left: 60px;
            width: calc(100% - 60px);
        }
        .main-content.expanded {
            margin-left: 200px;
            width: calc(100% - 200px);
        }
        .main-content-wrapper {
            max-width: 100%;
            overflow-x: auto;
        }
        .sidebar .nav-link {
            border-radius: 8px;
            margin-bottom: 4px;
            min-height: 40px;
            transition: all 0.2s ease;
        }
        .sidebar .nav-link:hover {
            background-color: #e9ecef;
        }
        .sidebar .nav-link.active {
            background-color: #007bff;
            color: white;
        }
        .sidebar .nav-link-text {
            transition: opacity 0.3s ease;
            white-space: nowrap;
            margin-left: 4px;
        }
        .sidebar.collapsed .nav-link-text {
            opacity: 0;
            display: none;
        }
        .sidebar.expanded .nav-link-text {
            opacity: 1;
            display: inline;
        }
        .sidebar.collapsed .nav-link {
            justify-content: center !important;
            padding: 10px 8px !important;
        }
        .sidebar.expanded .nav-link {
            justify-content: flex-start !important;
            padding: 10px 12px !important;
        }
        .sidebar.collapsed .nav-link i {
            margin: 0 !important;
        }
        .sidebar.expanded .nav-link i {
            margin-right: 8px !important;
            width: 16px;
            text-align: center;
        }
        .status-badge {
            font-size: 0.75rem;
        }
        .stats-card {
            transition: transform 0.2s;
        }
        .stats-card:hover {
            transform: translateY(-2px);
        }
        .toggle-sidebar-btn {
            border: none;
            background: none;
            color: white;
            padding: 0.375rem 0.75rem;
            border-radius: 0.25rem;
            transition: background-color 0.2s;
        }
        .toggle-sidebar-btn:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        /* 确保表格等组件不会超出容器 */
        .table-responsive {
            width: 100%;
        }
        .card, .form-control, .btn-group {
            max-width: 100%;
        }
        
        /* 为固定导航栏添加body上边距 */
        body {
            padding-top: 56px; /* Bootstrap navbar 高度 */
        }
        
        /* 右下角通知样式 */
        .toast-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 9999;
        }
        
        .toast {
            margin-bottom: 10px;
            min-width: 300px;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        /* 用户下拉菜单样式 */
        .navbar-nav .dropdown-menu {
            right: 0;
            left: auto;
            min-width: 200px;
            border: 1px solid rgba(0,0,0,.15);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        
        .navbar-nav .dropdown-menu.show {
            display: block;
        }
        
        /* 优化全局图标颜色 */
        .navbar-brand img {
            filter: brightness(1.1);
        }
        
        .navbar .fas,
        .navbar .fab {
            color: white !important;
        }
        
        .sidebar .nav-link .fas {
            color: #6c757d !important;
        }
        
        .sidebar .nav-link.active .fas {
            color: white !important;
        }
        
        .sidebar .nav-link:hover .fas {
            color: #495057 !important;
        }
        
        /* 优化卡片头部图标 */
        .card-header .fas {
            color: #495057 !important;
        }
        
        /* 优化按钮图标 */
        .btn .fas {
            color: inherit !important;
        }
        
        /* 优化徽章图标 */
        .badge .fas {
            color: inherit !important;
        }
        
        /* 配置管理子菜单样式 */
        .config-submenu {
            transition: all 0.3s ease;
            overflow: hidden;
        }
        
        .config-submenu .nav-link {
            padding-left: 2rem !important;
            font-size: 0.9em;
        }
        
        .config-chevron {
            transition: transform 0.3s ease;
        }
        
        .config-chevron.rotated {
            transform: rotate(180deg);
        }
        
        .sidebar.collapsed .config-submenu {
            display: none !important;
        }
        
        .sidebar.collapsed .config-chevron {
            display: none !important;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand d-flex align-items-center" href="{{ url_for('dashboard.overview') }}">
                <img src="{{ url_for('static', filename='images/xbyjob.png') }}" alt="XbyJob Logo" height="30" class="me-2">
                <span class="fw-bold">XbyJob</span>
            </a>
            
            {% if current_user.is_authenticated %}
            <!-- 切换侧边栏按钮 -->
            <button class="toggle-sidebar-btn me-3" onclick="toggleSidebar()" title="切换导航栏">
                <i class="fas fa-bars"></i>
            </button>
            <div class="navbar-nav ms-auto">
                <div class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" onclick="toggleUserDropdown(event)" aria-expanded="false">
                        <i class="fas fa-user me-1"></i>{{ current_user.username }}
                    </a>
                    <ul class="dropdown-menu" id="userDropdownMenu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="{{ url_for('auth.profile') }}">
                            <i class="fas fa-user-circle me-2"></i>个人资料
                        </a></li>
                        <li><a class="dropdown-item" href="{{ url_for('auth.change_password') }}">
                            <i class="fas fa-key me-2"></i>修改密码
                        </a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">
                            <i class="fas fa-sign-out-alt me-2"></i>退出登录
                        </a></li>
                    </ul>
                </div>
            </div>
            {% endif %}
        </div>
    </nav>

    <div class="container-fluid">
        {% if current_user.is_authenticated %}
        <!-- 侧边栏 -->
        <nav class="bg-light sidebar collapsed" id="sidebar">
            <div class="position-sticky pt-2">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center {% if request.endpoint == 'dashboard.overview' %}active{% endif %}" 
                           href="{{ url_for('dashboard.overview') }}" title="概览">
                            <i class="fas fa-tachometer-alt"></i>
                            <span class="nav-link-text">概览</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center {% if request.endpoint in ['dashboard.tasks', 'dashboard.new_task', 'dashboard.edit_task'] %}active{% endif %}" 
                           href="{{ url_for('dashboard.tasks') }}" title="任务管理">
                            <i class="fas fa-tasks"></i>
                            <span class="nav-link-text">任务管理</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center {% if request.endpoint == 'dashboard.executions' %}active{% endif %}" 
                           href="{{ url_for('dashboard.executions') }}" title="执行记录">
                            <i class="fas fa-history"></i>
                            <span class="nav-link-text">执行记录</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center {% if request.endpoint == 'dashboard.scripts' %}active{% endif %}" 
                           href="{{ url_for('dashboard.scripts') }}" title="脚本管理">
                            <i class="fas fa-code"></i>
                            <span class="nav-link-text">脚本管理</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center {% if request.endpoint == 'dashboard.recycle' %}active{% endif %}" 
                           href="{{ url_for('dashboard.recycle') }}" title="回收站">
                            <i class="fas fa-trash-restore"></i>
                            <span class="nav-link-text">回收站</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center {% if request.endpoint == 'dashboard.dependencies' %}active{% endif %}" 
                           href="{{ url_for('dashboard.dependencies') }}" title="依赖管理">
                            <i class="fas fa-cubes"></i>
                            <span class="nav-link-text">依赖管理</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center {% if request.endpoint in ['dashboard.global_parameters', 'dashboard.notification_config'] %}active{% endif %}" 
                           href="#" onclick="toggleConfigMenu(event)" title="配置管理">
                            <i class="fas fa-sliders-h"></i>
                            <span class="nav-link-text">配置管理</span>
                            <i class="fas fa-chevron-down ms-auto config-chevron" style="font-size: 0.8em;"></i>
                        </a>
                        <ul class="nav flex-column ms-3 config-submenu" style="display: none;">
                            <li class="nav-item">
                                <a class="nav-link d-flex align-items-center {% if request.endpoint == 'dashboard.global_parameters' %}active{% endif %}" 
                                   href="{{ url_for('dashboard.global_parameters') }}" title="公共参数">
                                    <i class="fas fa-cogs"></i>
                                    <span class="nav-link-text">公共参数</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link d-flex align-items-center {% if request.endpoint == 'common_methods.common_methods_page' %}active{% endif %}" 
                                   href="{{ url_for('common_methods.common_methods_page') }}" title="公共方法">
                                    <i class="fas fa-code"></i>
                                    <span class="nav-link-text">公共方法</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link d-flex align-items-center {% if request.endpoint == 'dashboard.notification_config' %}active{% endif %}" 
                                   href="{{ url_for('dashboard.notification_config') }}" title="通知配置">
                                    <i class="fas fa-bell"></i>
                                    <span class="nav-link-text">通知配置</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    {% if current_user.is_admin %}
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center {% if request.endpoint == 'dashboard.logs' %}active{% endif %}" 
                           href="{{ url_for('dashboard.logs') }}" title="系统日志">
                            <i class="fas fa-file-alt"></i>
                            <span class="nav-link-text">系统日志</span>
                        </a>
                    </li>
                    {% endif %}
                    {% if current_user.is_admin %}
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center {% if request.endpoint == 'dashboard.users' %}active{% endif %}" 
                           href="{{ url_for('dashboard.users') }}" title="用户管理">
                            <i class="fas fa-users"></i>
                            <span class="nav-link-text">用户管理</span>
                        </a>
                    </li>
                    {% endif %}
                    {% if current_user.is_admin %}
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center {% if request.endpoint == 'dashboard.settings' %}active{% endif %}" 
                           href="{{ url_for('dashboard.settings') }}" title="系统设置">
                            <i class="fas fa-cog"></i>
                            <span class="nav-link-text">系统设置</span>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </nav>
        {% endif %}

        <!-- 主内容区 -->
        <main class="main-content {% if current_user.is_authenticated %}collapsed{% endif %}" id="mainContent">
            <div class="main-content-wrapper">
                {% block content %}{% endblock %}
            </div>
        </main>
    </div>

    <!-- 右下角Toast通知容器 -->
    <div class="toast-container" id="toastContainer"></div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // Toast通知功能
        function showToast(message, type = 'info', duration = 3000) {
            const toastContainer = document.getElementById('toastContainer');
            const toastId = 'toast-' + Date.now();
            
            // 确定颜色类型
            let bgClass = 'bg-info';
            let iconClass = 'fas fa-info-circle';
            
            switch(type) {
                case 'success':
                    bgClass = 'bg-success';
                    iconClass = 'fas fa-check-circle';
                    break;
                case 'error':
                case 'danger':
                    bgClass = 'bg-danger';
                    iconClass = 'fas fa-exclamation-circle';
                    break;
                case 'warning':
                    bgClass = 'bg-warning';
                    iconClass = 'fas fa-exclamation-triangle';
                    break;
                default:
                    bgClass = 'bg-info';
                    iconClass = 'fas fa-info-circle';
            }
            
            const toastHtml = `
                <div class="toast ${bgClass} text-white" id="${toastId}" role="alert">
                    <div class="toast-header ${bgClass} text-white border-0">
                        <i class="${iconClass} me-2"></i>
                        <strong class="me-auto">系统通知</strong>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
                    </div>
                    <div class="toast-body">
                        ${message}
                    </div>
                </div>
            `;
            
            toastContainer.insertAdjacentHTML('beforeend', toastHtml);
            
            const toastElement = document.getElementById(toastId);
            const toast = new bootstrap.Toast(toastElement, {
                autohide: true,
                delay: duration
            });
            
            toast.show();
            
            // 清理DOM
            toastElement.addEventListener('hidden.bs.toast', function() {
                toastElement.remove();
            });
        }
        
        // 处理Flask flash消息
        function processFlashMessages() {
            // Flash消息处理已移至页面底部
        }
        
        // 全局显示消息函数（供其他页面调用）
        window.showMessage = showToast;
        
        // 切换用户下拉菜单
        function toggleUserDropdown(event) {
            event.preventDefault();
            var dropdown = document.getElementById('userDropdownMenu');
            var toggle = document.getElementById('navbarDropdown');
            
            if (dropdown.classList.contains('show')) {
                dropdown.classList.remove('show');
                toggle.setAttribute('aria-expanded', 'false');
            } else {
                dropdown.classList.add('show');
                toggle.setAttribute('aria-expanded', 'true');
            }
        }
        
        // 切换配置管理子菜单
        function toggleConfigMenu(event) {
            event.preventDefault();
            const submenu = document.querySelector('.config-submenu');
            const chevron = document.querySelector('.config-chevron');
            
            if (submenu.style.display === 'none' || submenu.style.display === '') {
                submenu.style.display = 'block';
                chevron.classList.add('rotated');
                localStorage.setItem('configMenuExpanded', 'true');
            } else {
                submenu.style.display = 'none';
                chevron.classList.remove('rotated');
                localStorage.setItem('configMenuExpanded', 'false');
            }
        }
        
        // 切换侧边栏功能
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('mainContent');
            
            // 如果没有侧边栏（未登录用户），直接返回
            if (!sidebar || !mainContent) {
                return;
            }
            
            if (sidebar.classList.contains('collapsed')) {
                // 展开侧边栏
                sidebar.classList.remove('collapsed');
                sidebar.classList.add('expanded');
                mainContent.classList.remove('collapsed');
                mainContent.classList.add('expanded');
                
                // 保存状态到localStorage
                localStorage.setItem('sidebarExpanded', 'true');
            } else {
                // 收起侧边栏
                sidebar.classList.remove('expanded');
                sidebar.classList.add('collapsed');
                mainContent.classList.remove('expanded');
                mainContent.classList.add('collapsed');
                
                // 保存状态到localStorage
                localStorage.setItem('sidebarExpanded', 'false');
            }
        }
        
        // 页面加载时恢复侧边栏状态和处理flash消息
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('mainContent');
            
            // 如果没有侧边栏（未登录用户），直接返回
            if (sidebar && mainContent) {
                const isExpanded = localStorage.getItem('sidebarExpanded') === 'true';
                
                if (isExpanded) {
                    sidebar.classList.remove('collapsed');
                    sidebar.classList.add('expanded');
                    mainContent.classList.remove('collapsed');
                    mainContent.classList.add('expanded');
                }
            }
            
            // 恢复配置管理子菜单状态
            const configMenuExpanded = localStorage.getItem('configMenuExpanded') === 'true';
            const submenu = document.querySelector('.config-submenu');
            const chevron = document.querySelector('.config-chevron');
            
            if (configMenuExpanded && submenu && chevron) {
                submenu.style.display = 'block';
                chevron.classList.add('rotated');
            }
            
            // 如果当前页面是配置相关页面，自动展开配置菜单
            const currentEndpoint = '{{ request.endpoint }}';
            if (currentEndpoint === 'dashboard.global_parameters' || currentEndpoint === 'dashboard.notification_config') {
                if (submenu && chevron) {
                    submenu.style.display = 'block';
                    chevron.classList.add('rotated');
                    localStorage.setItem('configMenuExpanded', 'true');
                }
            }
            
            // 添加点击外部关闭下拉菜单的事件监听
            document.addEventListener('click', function(event) {
                var dropdown = document.getElementById('userDropdownMenu');
                var toggle = document.getElementById('navbarDropdown');
                if (dropdown && !dropdown.contains(event.target) && !toggle.contains(event.target)) {
                    dropdown.classList.remove('show');
                    toggle.setAttribute('aria-expanded', 'false');
                }
            });
            
            // 处理Flash消息
            processFlashMessages();
        });
    </script>
    
    <!-- Flash消息处理 -->
    <script>
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                showToast('{{ message|e }}', '{{ category }}');
            {% endfor %}
        {% endif %}
    {% endwith %}
    </script>
    
    {% block extra_js %}{% endblock %}
    
    {% block scripts %}{% endblock %}
</body>
</html>